<script setup lang="ts">



import { reactive,ref } from "@vue/reactivity";
import service from "../uitls/service.ts";
import type {Ref} from "vue";
import type {FormInstance} from "element-plus";

interface ILogin {
  adminname: string,
  password: string
}

const loginData = reactive<ILogin>({
  adminname: "",
  password: ""
});

const loginFormRef = ref<FormInstance>();


function submitForm(loginFormRef:Ref<FormInstance>){
  // console.log("loginFormRef",loginFormRef);

  console.log("loginData",loginData);
  axios({
    url:"http://121.89.205.189:3000/admin/admin/login",
    method:"post",
    data:loginData
  })
  .then(res=>{
    if(res.data.code==="200"){
      alert("登录成功！");
      sessionStorage.setItem("token",res.data.data.token);
    }
  })
}

</script>

<template>
  <div class="login-box">
    <div>登录增加了一行</div>
    <div>登录增加了二行</div>

    <el-form class="form-box" :model="loginData" ref="loginFormRef">

      <el-form-item>
        <el-input placeholder="管理员姓名" v-model="loginData.adminname" />
      </el-form-item>

      <el-form-item>
        <el-input type="password" placeholder="密码" v-model="loginData.password" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(loginFormRef)">登录</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<style scoped>
.login-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://cas.1000phone.net/cas/images/login/bg.png) 50% no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.form-box {
  width: 400px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ededed;
  padding: 20px;
}
</style>
